import React from 'react'
export function Test() {
  return (
    <>
      <div>
        <div className="bg-slate-500 h-48 flex flex-col ">
          <h1 className="text-cyan-400 text-4xl font-semibold text-center bg-slate-300">
            React Router
          </h1>
          {/* grid-cols-3 把当前元素的子元素 分别列于三个栅格中 */}
          <div className="bg-red-800 text-center flex flex-row items-center justify-center ">
            <div className="bg-violet-400 w-48 h-20 ">First</div>
            <div className="bg-sky-400 w-48 h-20">Second</div>
            <div className="bg-green-400 w-48 h-20">Second</div>
          </div>
        </div>
        <br />
        <h1 className="text-4xl">1.标准流布局</h1>
        <div className="bg-sky-500">
          123<span className="bg-green-200">456</span>
          <span className="bg-green-500">789</span>
        </div>
        <div className="bg-sky-300">123</div>
        <div className="bg-sky-100">123</div>

        <h1 className="text-4xl">2.浮动布局</h1>
        <div className="bg-sky-500 float-start">456</div>
        <div className="bg-sky-300 float-start">123</div>
        <div className="bg-sky-100">123</div>

        <h1 className="text-4xl">3.定位布局</h1>
        <div className="bg-sky-500 static">456</div>
        <div className="bg-sky-300 absolute left-20">123</div>
        <div className="bg-sky-100">123</div>
        <div className="bg-sky-100 sticky">123</div>

        <h1 className="text-4xl">4.flex布局</h1>
        {/* flex-wrap 换行 */}
        <div className="flex flex-wrap items-center">
          <div className="bg-sky-400  basis-1/2 hover:basis-1/3">basis-1/2</div>
          <div className="bg-sky-300  basis-1/4">basis-1/4</div>
          <div className="bg-sky-200  basis-1/4">basis-1/4</div>
          {/* 响应式设计 最小宽度为320px  也就是 大于等于 320px 沾满一行*/}
          <div className="bg-red-400  sm:basis-1/2 md:basis-1/4 min-[320px]:basis-full">
            1/2
          </div>
          <div className="bg-red-300  sm:basis-1/4 md:basis-1/2 ">1/4</div>
          <div className="bg-red-200  sm:basis-1/4 md:basis-1/4 ">1/4</div>
          {/* grow可以补充 */}
          <div className="bg-sky-200 w-96 m-2 grow">123</div>
          <div className="bg-green-100 w-96 m-2 grow">123</div>
          <div className="bg-green-200 w-96 m-2 grow">123</div>
          <div className="bg-green-300 w-96 m-2">123</div>
          <div className="bg-green-400 w-96 m-2">123</div>
          <div className="bg-green-500 w-96 m-2">123</div>
          <div className="bg-blue-100 w-96 m-2 grow">123</div>
          <div className="bg-blue-500 w-96 m-2">123</div>
        </div>

        <h1 className="text-4xl">5.栅格布局</h1>
        {/* gap是栅格之间的距离 */}
        <div className="grid md:grid-cols-4 gap-4 sm:grid-cols-2">
          {/* 强制占据两个栅格 */}
          <div className="bg-red-300 col-span-2">123</div>
          {/* 从第几个栅格开始布局 */}
          <div className="bg-red-400 col-start-1">123</div>
          <div className="bg-red-500 col-start-2">123</div>
          <div className="bg-red-600 col-start-2">123</div>
          <div className="bg-red-800">123</div>
          <div className="bg-red-900">123</div>
          <div className="bg-red-100">123</div>
          {/* 从第二个之前结束 */}
          <div className="bg-red-200 col-end-2">123</div>
        </div>
      </div>
    </>
  )
}
